﻿@page
@model Chino.IdentityServer.Pages.Account.RegisterModel
@using Chino.IdentityServer.Extensions.Configurations
@inject IStringLocalizer<Chino.IdentityServer.Pages.Account.RegisterModel> L
@inject Chino.IdentityServer.Configures.ChinoAccountConfiguration AccountConfiguration
@inject Chino.IdentityServer.Configures.CountryCodeConfiguration CountryCodes
@inject CommonLocalizationService CL

@{
    ViewContext.ClientValidationEnabled = true;
    ViewData["Nav_ShowLogin/Out"] = false;
    ViewData["Title"] = L["Title"];
}


<div class="register-page pb-4 mb-4">
    <div class="register-form">
        <div class="lead">
            <h1 class="h3 mb-3 fw-normal">@L["title_register"]</h1>
        </div>

        <partial name="ValidationSummary" />

        <div class="card mt-1 shadow text-center">
            <div class="card-header">
                <h3 class="h5">@L["subTitle_register"]</h3>
            </div>

            <div class="card-body">
                <form asp-route="Register" method="post">
                    @*隐藏表单(暂无)*@
                    <input type="hidden" asp-for="ReturnUrl" />

                    @*用户名*@
                    @if (AccountConfiguration.UserName.Register)
                    {
                        <div class="form-group">
                            <label asp-for="RegisterDto.UserName" class="visually-hidden">@L["username"]</label>
                            <input class="form-control input-head" placeholder="@L["username"]" asp-for="RegisterDto.UserName" id="username" autofocus>
                        </div>
                    }

                    @*邮箱*@
                    @if (AccountConfiguration.Email.Register)
                    {
                        <div class="form-group" >
                            <label asp-for="RegisterDto.Email" class="visually-hidden">@L["email"]</label>
                            @*//这儿要判断的的是，如果上面的用户名输入框没显示，意味着邮箱输入框在最上面，就要有圆角了*@
                            <input type="email" class="form-control @(AccountConfiguration.UserName.Register?"input-middle":"input-head")" placeholder="@L["email"]" asp-for="RegisterDto.Email" id="email" autofocus>
                        </div>
                    }

                    @*手机号*@
                    @if (AccountConfiguration.Phone.Register)
                    {
                        <div class="form-group">
                            <label asp-for="RegisterDto.PhoneNumber" class="visually-hidden">@L["phone_number"]</label>
                            <input type="tel" class="form-control  @((AccountConfiguration.UserName.Register || AccountConfiguration.Email.Register) ? "input-middle" : "input-head")" id="phoneNumber" placeholder="@L["phone_number"]" asp-for="RegisterDto.PhoneNumber" autofocus>
                        </div>

                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-text input-middle" id="basic-addon1">@L["country_calling_code"] +</span>
                                <input class="form-control input-middle" list="countryListOptions" placeholder="@L["country_calling_code"]"  id="phoneDialingCode" asp-for="RegisterDto.PhoneDialingCode" autofocus>
                                <datalist id="countryListOptions">
                                    @foreach (var country in CountryCodes.Data)
                                    {
                                        @*<option value="@country.DialingCode">@CL[country.Name] (@country.DialingCode)</option>*@
                                        <option value="@country.DialingCodeWithoutPlus">@CL[country.Name] (@country.DialingCode)</option>
                                    }
                                </datalist>
                            </div>
                            
                        </div>
                    }

                    @*口令*@
                    <div class="form-group">
                        <label asp-for="RegisterDto.Password" class="visually-hidden">@L["password"]</label>
                        <input type="password" class="form-control input-middle" placeholder="@L["password"]" asp-for="RegisterDto.Password" id="password" autofocus>
                    </div>
                    @*确认口令*@
                    <div class="form-group">
                        <label asp-for="RegisterDto.ConfirmPassword" class="visually-hidden">@L["comfirm_password"]</label>
                        <input type="password" class="form-control input-end" placeholder="@L["comfirm_password"]" asp-for="RegisterDto.ConfirmPassword" autofocus>
                    </div>

                    @*表单验证错误都放在这儿*@
                    <div class="form-group text-left">
                        <div><span asp-validation-for="RegisterDto.UserName" class="text-danger"></span></div>
                        <div><span asp-validation-for="RegisterDto.Email" class="text-danger"></span></div>
                        <div><span asp-validation-for="RegisterDto.PhoneNumber" class="text-danger"></span></div>
                        <div><span asp-validation-for="RegisterDto.Password" class="text-danger"></span></div>
                        <div><span asp-validation-for="RegisterDto.ConfirmPassword" class="text-danger"></span></div>
                    </div>

                    @*注册按钮*@
                    <div class="d-grid d-sm-block gap-2 mx-auto">
                        <button class="btn btn-primary px-5" name="button" value="login">@L["btn_register"]</button>
                        @*<button class="btn btn-secondary px-5" formnovalidate name="button" value="cancel">@L["btn_cancel"]</button>*@
                        @*  使用class "cancel" 可以跳过客户端的表单验证，或者使用"formnovalidate" *@
                    </div>
                </form>
            </div>

            <div class="card-footer text-muted">
                <a asp-page="Login" class="link-secondary">@L["link_login"]</a>
            </div>
        </div>
    </div>
</div>


<style>
    body {
        background-color: #f5f5f5;
    }

    .register-form {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }

        .register-form .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

            .register-form .form-control:focus {
                z-index: 2;
            }

        .register-form .input-head {
            margin-bottom: -1px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .register-form .input-middle {
            margin-bottom: -1px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .register-form .input-end {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .register-form .card-footer {
            font-size: small;
        }

            .register-form .card-footer a {
                text-decoration: none;
            }

                .register-form .card-footer a:hover {
                    text-decoration: none;
                }
</style>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}


